<template>
  <!-- Header 组件 -->
  <Header></Header>
  <!-- 面包屑导航 -->
  <Crumb>详情页</Crumb>
  <!-- 主要内容 -->
  <div class="my-2" v-if="JSON.stringify(data.goodsDetails) != '{}'">
    <el-row :gutter="20">
      <el-col :span="9">
        <el-row>
          <el-col :span="24">
            <img :src="data.imgs[data.currentImgIndex]" class="border-gray w-100">
          </el-col>
        </el-row>
        <el-row :gutter="10" class="my-2">
          <el-col :span="4" v-for="(item,index) in data.imgs" :key="index" @click="data.currentImgIndex=index">
            <img :src="item" class="border-gray w-100">
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="15">
        <el-row class="my-3">{{ data.descs[data.currentVersionIndex]}}</el-row>
        <el-row class="my-3 price">
            <span class="yen">&yen;</span>{{ data.prices[data.currentVersionIndex]}}.00
        </el-row>
        <el-row class="my-3">
          <el-col :span="3">配送至：</el-col>
          <el-col :span="21">广东省广州市增城区</el-col>  
        </el-row>
        <el-row class="my-3">
          <el-col :span="3" class="py-1">选择颜色：</el-col>
          <el-col :span="21" class="span">
            <span v-for="(item,index) in data.colors" :key="index" @click="data.currentColorIndex=index" :class="{active:data.currentColorIndex==index}" >
              {{ item }}
            </span>
          </el-col>
        </el-row>
        <el-row class="my-3">
          <el-col :span="3" class="py-1">选择版本：</el-col>
          <el-col :span="21" class="span">
            <span v-for="(item,index) in data.versions" :key="index" @click="data.currentVersionIndex=index" :class="{active:data.currentVersionIndex==index}">
              {{ item }}
            </span>
          </el-col>
        </el-row>
        <el-row class="my-3">
          <el-col :span="3" class="py-1">购买数量：</el-col>
          <el-col :span="21" class="number">
            <el-input-number v-model="data.num" :min="1" :max="10" @change="handleChange" />
          </el-col>
        </el-row>
        <el-row class="my-3">
          <el-col :span="2"></el-col>
          <el-col :span="22">
            <el-button type="success" size="large" class="btn" @click="addCart(data.goodsDetails.cid)">加入购物车</el-button>
            <el-button type="danger" size="large" class="btn" @click="buy(data.goodsDetails.cid)">立即购买</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
  <div v-else>
    <p class="empty">该商品暂无详细信息!</p>
  </div>
  <!-- Footer 组件 -->
  <Footer></Footer>
</template>

<script setup>
  import Header from "@/components/Header.vue"   
  import Footer from "@/components/Footer.vue"
  import Crumb from "@/components/Crumb.vue"
  import { reactive,getCurrentInstance,onMounted } from 'vue'
  import { useRoute,useRouter } from "vue-router"
  const { proxy } = getCurrentInstance()  //获取当前实例的代理对象proxy
  const route = useRoute()
  const router = useRouter()
  const data = reactive({
    goodsDetails:{},         //当前商品详情
    currentImgIndex:0,       //当前图片索引
    currentVersionIndex:0,   //当前型号索引
    currentColorIndex:0,     //当前颜色索引
    imgs:[],                 //图片数组
    versions:[],             //版本数组
    descs:[],                //描述数组
    prices:[],               //价格数组
    num:1                    //购买数量
  })

  let getGoodsDetails = ()=>{        //取得全部商品数据
    proxy.$http({                
      method:"get",               
      url:"./data/goods-details.json"
    }).then(res=>{
      for (let i in res.data) {
        if(res.data[i].cid==route.query.cid) {
          data.goodsDetails=res.data[i]
          data.imgs = data.goodsDetails.imgs
          data.versions = data.goodsDetails.versions
          data.colors = data.goodsDetails.colors
          data.prices = data.goodsDetails.prices
          data.descs = data.goodsDetails.descs
          break;
        }
      }
    })
  }
  const addCart=(cid)=>{
    //创建保存到购物车商品对象
    const goods={}
    goods.cid=cid
    goods.num = data.num
    goods.price = data.prices[data.currentVersionIndex]
    goods.desc=data.descs[data.currentVersionIndex]
    goods.img = data.imgs[0]
    goods.checked = true
    console.log(goods)
    //从localstorage中读出购物车的内容
    const token = sessionStorage.getItem("token");   //读取当前登录信息
    if(token) {
      //从localstorage读出以前保存到购物车的商品
      let myCart = JSON.parse(localStorage.getItem("myCart") || '[]');
      console.log("mycart:"+myCart)
      //添加商品到购物车
      let i = myCart.length==0?0:myCart.length
      myCart[i]=goods
      //保存商品到购物车
      localStorage.setItem("myCart",JSON.stringify(myCart))
      //跳转到购物车
      router.push("/cart")
    }else{
      alert("你还未登录，请先登录!")
      router.push("/login")
    }
  }

  const buy=(cid)=>{
    router.push({path:"/order",query:{cid:cid}})
  }
  onMounted(()=>{
    getGoodsDetails()
    // localStorage.clear()
  })
</script>

<style scoped>
.price{
  color:red;
  font-size:1.1rem;
  font-weight: bold;
  background-color: #eee;
  padding:5px 10px;
}
.price>.yen{
  font-size:0.8rem;
  padding:5px 10px;
}
.span>span{
  display: inline-block;
  padding:6px 30px;
  text-align: center;
  background-color: #eee;
  margin-right: 5px;
  border: 1px dashed #ccc;
  border-radius: 3px;
  cursor: pointer;
}
.btn{
  width: 150px;
  font-weight: bold;
}
.active{
  border:1px dashed red!important;
}
</style>